<template>
    <div style="height: 100%;position:relative;overflow-y: hidden">
<!--     搜索框       -->
        <el-card :inline="true" style="margin: 20px;z-index: 10;height: 120px;position: fixed">
            <el-form :inline="true">
                    <el-form-item label="分店" style="width:220px">
                        <el-select v-model="search_tables_form.branchId" placeholder="请选择分店" @change="load_tables">
                            <el-option v-for="item in branchs" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="餐桌状态" style="width:180px">
                        <el-select v-model="search_tables_form.status" placeholder="餐桌状态" @change="load_tables">
                            <el-option label="启用" value="0"></el-option>
                            <el-option label="禁用" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用餐状态" style="width:180px">
                        <el-select v-model="search_tables_form.repastStatus" placeholder="用餐状态" @change="load_tables">
                            <el-option label="就餐中" value="0"></el-option>
                            <el-option label="空闲" value="1"></el-option>
                            <el-option label="已预约" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="可坐人数" style="width:180px">
                        <el-select v-model="search_tables_form.number" placeholder="人数" @change="load_tables">
                            <!--el-option label="1人桌" value="1"></el-option>
                            <el-option label="2人桌" value="2"></el-option>
                            <el-option label="3人桌" value="3"></el-option>
                            <el-option label="4人桌" value="4"></el-option>
                            <el-option label="5人桌" value="5"></el-option>
                            <el-option label="6人桌" value="6"></el-option>-->

                            <!--<el-option v-for="item in tables_arr" :value="item.number">{{item.number}}<span>人桌</span></el-option>-->
                            <el-option v-for="item in 20" :value="item">{{item}}<span>人桌</span></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="餐桌名" style="width:180px">
                        <el-input v-model="search_tables_form.name" placeholder="请输入餐桌名" @keydown.enter="load_tables"></el-input>
                    </el-form-item>

                    <el-form-item  leable="用户搜索" style="width:280px">
                        <el-button style="margin-left: 30px" @click="reset_search">重置</el-button>
                        <el-button @click="load_tables" type="primary">查询</el-button>
                        <el-button @click="open_add_table_dialog" type="success">新增餐桌</el-button>
                    </el-form-item>
                </el-form>
        </el-card>
<!--   展示信息     -->
        <el-card style="height:500px;margin: 20px;top: 138px;position: relative">
            <!--      新增餐桌对话框-->
            <el-dialog v-model="dialog_add_tables" title="新增餐桌" :before-close="close_add_tables">
                <el-form :rules="add_table_form_rules" :model="add_table_form" ref="add_table_formRef">
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="分店名称" prop="branchId">
                                <el-select v-model="add_table_form.branchId" placeholder="请选择分店" style="width: 220px;">
                                    <el-option v-for="item in branchs" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="餐桌名称" prop="name">
                                <el-input v-model="add_table_form.name" placeholder="请输入餐桌名称" style="width: 220px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:45px" :gutter="30">
                        <el-col :span="12">
                            <el-form-item label="可坐人数">
                                <el-input-number v-model="add_table_form.number" :min="1" :max="20"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-button @click="add_tables" type="primary" style="position: relative;margin-left: 200px">确认</el-button>
                        </el-col>
                    </el-row>
                </el-form>

            </el-dialog>
            <!--      餐桌信息表格          -->
            <el-table style="width: 100%;" height="470px" :data="tables_arr"  :default-sort="{ prop: 'branchName', order: 'descending' }">
                <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
                <el-table-column label="分店名" prop="branchName" align="center" sortable>
                    <template #default="scope">
                        <el-tag size="large" style="width: 180px;background-color: rgba(150,193,234,0.55);color: #333" >{{scope.row.branchName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="餐桌名" align="center"></el-table-column>
                <el-table-column prop="number" label="可坐人数" align="center" sortable></el-table-column>
                <el-table-column prop="status" label="状态" align="center" :formatter="tables_status_formatter"></el-table-column>
                <el-table-column prop="repastStatus" label="就餐状态" align="center" :formatter="tables_repastStatus_formatter"></el-table-column>
                <el-table-column label="操作" align="center" width="200px">
                    <template #default="scope">
                        <el-button link type="primary" @click="edit_tables(scope.row.id)">详情</el-button>
                        <el-button link type="primary" @click="delete_tables(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div v-if="card_tables" style="display: flex;align-items: center;justify-content: center;">
            <!--      编辑餐桌信息card          -->
            <el-card  style="position: absolute;bottom:110px;z-index: 1;width: 800px;height: 400px;border-radius: 20px;background-color: #f5f5f5">
                <p style="text-align:center;font-size: 20px;font-weight: bolder;color: #373838;margin-bottom: 30px">餐桌信息</p>
                <table style="width: 100%;">
                    <tbody>
                    <tr style="line-height: 60px">
                        <td colspan="2">
                            <span style="color: #666;font-size: 15px;margin-left: 20px">餐桌名称：</span><el-input v-model="save_tables_form.name" style="width: 120px;"/>
                        </td>
                        <td colspan="2" style="text-align: center">
                            <span style="color: #666;font-size: 15px">可坐人数：</span><el-input-number v-model="save_tables_form.number" :min="1" :max="20"/>
                        </td>
                        <td colspan="2" style="text-align: center">
                            <span style="color: #666;font-size: 15px">餐桌状态：  </span><el-switch v-model="save_tables_form.status" active-value="0" inactive-value="1" active-text="启用" inactive-text="禁用" style="--el-switch-on-color: #639dd7; --el-switch-off-color: #fbafaf" />
                        </td>
                    </tr>
                    <tr style="line-height: 60px">
                        <td colspan="2">
                            <span style="color: #666;font-size: 15px;margin-left: 20px">分店名称：</span>
                            <el-tag style="background-color: rgba(106,178,217,0.32);color: #666;" size="large">{{save_tables_form.branchName}}</el-tag>
                        </td>
                        <td colspan="4">
                            <span style="color: #666;font-size: 15px;margin-left: 20px">就餐状态：</span>
                            <el-radio-group v-model="save_tables_form.repastStatus" style="position: relative;top: 5px">
                                <el-radio value="0">就餐中</el-radio>
                                <el-radio value="1">空闲</el-radio>
                                <el-radio value="2">已预约</el-radio>
                            </el-radio-group>
                        </td>

                    </tr>
                    <tr style="line-height: 40px">
                        <td colspan="6">
                            <span style="color: #666;font-size: 15px;margin-left: 20px">已预约时间段：</span><br>
                            <el-checkbox style="margin-left: 30px" true-value="1" false-value="0" v-model="save_tables_form.timeOne">
                                0:00:00-8:00
                            </el-checkbox>
                            <el-checkbox true-value="1" false-value="0" v-model="save_tables_form.timeTwo">
                                8:00:00-12:00
                            </el-checkbox>
                            <el-checkbox true-value="1" false-value="0" v-model="save_tables_form.timeThree">
                                12:00:00-16:00
                            </el-checkbox>
                            <el-checkbox true-value="1" false-value="0" v-model="save_tables_form.timeFour">
                                16:00:00-20:00
                            </el-checkbox>
                            <el-checkbox true-value="1" false-value="0" v-model="save_tables_form.timeFive">
                                20:00:00-24:00
                            </el-checkbox>

                        </td>

                    </tr>
                    </tbody>

                </table>
                <template #footer>
                    <div style="position: relative;margin-left: 600px">
                        <el-button @click="close_tables">取消</el-button>
                        <el-button @click="save_tables" type="primary">保存</el-button>
                    </div>

                </template>
            </el-card>
        </div>

    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage, ElMessageBox} from "element-plus";
/*const box = ref('0')
const printBox = ()=>{
    console.log(box.value)
}*/

//餐桌信息card
const card_tables = ref(false)
//保存餐桌信息的表单
const save_tables_form = ref({
    name:'',number:'',status:'',repastStatus:'',
    timeOne:'',timeTwo:'',timeThree:'',timeFour:'',timeFive:''
})

//修改餐桌保存餐桌信息
const save_tables = ()=>{
    let table = save_tables_form.value;
    if(table.repastStatus==='1'&&(table.timeOne==='1'|table.timeTwo==='1'|table.timeThree==='1'|table.timeFour==='1'|table.timeFive==='1')){
        ElMessage.warning('当前处于空闲状态，请检查信息是否匹配')
        return
    }
    if(table.repastStatus==='2'&&(table.timeOne==='0'&table.timeTwo==='0'&table.timeThree==='0'&table.timeFour==='0'&table.timeFive==='0')){
        ElMessage.warning('当前处于预约状态，请检查信息是否匹配')
        return
    }
    console.log("保存的餐桌信息")
    console.log(save_tables_form.value)
    let data = qs.stringify(save_tables_form.value)
    axios.post(BASE_URL+'/v1/tables/save',data)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('修改成功')
                card_tables.value=false
                load_tables()
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//餐桌数组
const tables_arr = ref([])

//分店数组
const branchs = ref([{name:'',id:''}])
onMounted(()=>{
    getBranchs(branchs)
    load_tables()
})

//餐桌搜索表单
const search_tables_form = ref({
    name:'',number:'',status:'',repastStatus:'',branchId:''
})
//重置搜索
const reset_search = ()=>{
    search_tables_form.value = {name:'',number:'',status:'',repastStatus:'',branchId:''}
    load_tables()
}
const load_tables = ()=>{
    let data = qs.stringify(search_tables_form.value)
    axios.get(BASE_URL+'/v1/tables/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                tables_arr.value=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//根据餐桌id查询餐桌
const load_table_by_id = (object,id)=>{
    axios.get(BASE_URL+'/v1/tables/select?id='+id)
        .then((response)=>{
            if(response.data.code===2000){
                object.value=response.data.data[0]
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}


//关闭餐桌卡片
const close_tables = ()=>{
    ElMessageBox.confirm(
        '确认关闭吗?',
        '提示！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        card_tables.value=false
        save_tables_form.value={}
    }).catch(() => {})

}
//餐桌详情按钮
const edit_tables = (id)=>{
    card_tables.value=true
    load_table_by_id(save_tables_form,id)

}
const delete_tables = (id) =>{
    ElMessageBox.confirm(
        '确认删除吗?',
        '该操作不可逆！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        axios.post(BASE_URL+'/v1/tables/deleteById/'+id)
            .then((response)=>{
                if(response.data.code===2000){
                    ElMessage.success('删除成功')
                    load_tables()
                }else{
                    ElMessage.error(response.data.msg)
                }
            })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

//表格内容转换
const tables_status_formatter = (row,column,cellValue,index)=>{
   if(cellValue === '0'){
       cellValue='启用'
   }else if(cellValue==='1'){
       cellValue='禁用'
   }
   return cellValue
}

const tables_repastStatus_formatter = (row,column,cellValue,index)=>{
    if(cellValue === '0'){
        cellValue='就餐中'
    }else if(cellValue === '1'){
        cellValue='空闲'
    }else if(cellValue==='2'){
        cellValue='已预约'
    }
    return cellValue
}

//新增餐桌dialog
const dialog_add_tables = ref(false)
//新增餐桌表单
const add_table_form = ref({
    branchId:'',name:'',number:''
})
//打开新增餐桌对话框
const open_add_table_dialog = ()=>{
    dialog_add_tables.value=true
}
//关闭新增餐桌对话框
const close_add_tables = ()=>{
    ElMessageBox.confirm(
        '确认关闭吗?',
        '提示：',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        dialog_add_tables.value=false
        add_table_form.value={}
    }).catch(() => {
        ElMessage.info('已取消')
    })
}
//确认新增餐桌
const add_tables = ()=>{
    add_table_formRef.value.validate((valid)=>{
        if(!valid){
            ElMessage.error('请检查输入的信息')
        }else{
            let data = qs.stringify(add_table_form.value)
            axios.post(BASE_URL+'/v1/tables/save',data)
                .then((response)=>{
                    if(response.data.code===2000){
                        ElMessage.success('新增成功')
                        dialog_add_tables.value=false
                        add_table_form.value={}
                        load_tables()
                    }else{
                        ElMessage.error(response.data.msg)
                    }
                })
        }
    })

}
//新增餐桌对话框表单实例
const add_table_formRef = ref(null)
//新增餐桌对话框表单验证
const add_table_form_rules = {
    branchId:{required:true,message:'分店不能为空',trigger:'blur'},
    name:{required:true,message:'餐桌名不能为空',trigger:'blur'}
}
</script>


<style scoped>

</style>